<template>
<!-- 	<view class="wxTable" @tap="wxParseTableTap">
		<rich-text :nodes="nodes" :class="node.classStr" :style="'user-select:' + parseSelect"></rich-text>
	</view> -->
	<scroll-view scroll-x="true" style="max-width: 750rpx;">
		<view class="newTable"  v-if="gridConfig" :style="{
			'gridTemplateRows':`repeat(${gridConfig.row},minmax(48rpx,auto))`,
			'gridTemplateColumns':`repeat(${gridConfig.column},minmax(25%,auto))`,
		}">
		
		<view class="newTable-tb" v-for="(nodes,index) in gridConfig.list" :key="index" :style="nodes.attrs.style">
			<template v-if="nodes.children[0].name=='img'">
				<image @click="preview(nodes.children[0].attrs.src)" :src="nodes.children[0].attrs.src" mode="widthFix" style="width: 100%;"></image>
			</template>
			<rich-text v-else style="width: 100%;" :nodes="nodes.children" :style="'user-select:' + parseSelect"></rich-text>
		</view>
		</view>
	</scroll-view>

	
</template>
<script>
import wxParseImg from './wxParseImg.vue';
export default {
	name: 'wxParseTable',
	props: {
		node: {
			type: Object,
			default() {
				return {};
			},
		},
	},
	inject: ['parseSelect'],
	components: {
		wxParseImg
	},
	data() {
		return {
			nodes:[],
			allTr:[],
			gridConfig:null
		};
	},
	mounted() {
		this.nodes=this.loadNode([this.node]);
		// console.log(this.allTr)
		this.$nextTick(()=>{
			this.transformationGrid(this.allTr)
		})
	},
	methods: {
		preview(url){
			uni.previewImage({
				urls:[url]
			})
		},
		transformationGrid(list){
			let gridConfig = {
				column:0,
				row:0,
				list:[]
			}
			gridConfig.row = list.length;
			gridConfig.column = 0;
			
			// [
			// 	[1,1,1,0,1,1],
			// 	[1,1,0,1,0,1],
			// 	[0,0,0,1,1,1],
			// ]
			list.forEach((v,pindex)=>{
				if(pindex==0){
					v.children.forEach(v2=>{
						gridConfig.column += (v2.attrs.colspan?v2.attrs.colspan*1:1) //修复网格列数
					})
				}
			})
			let grid = []
			for (let i = 0; i < gridConfig.row; i++) {
				let rowGrid = new Array(gridConfig.column).fill(1)
				grid.push(rowGrid)
			}
		
			
			for (var i = 0; i < grid.length; i++) { //修复网格
				for (let j = 0; j < grid[i].length; j++) {
					let tem = list[i].children[j];
					if(tem&&tem!='empty'){
						if(tem.attrs){
							if(tem.attrs.colspan>1){
								// j = 0;i =3；row=2  
								for(let c=j;c<tem.attrs.colspan*1+j;c++){
									if(c>j){
										list[i].children.splice(c,0,'empty')
									}
									
									if(tem.attrs.rowspan){
										for (let r = i; r < tem.attrs.rowspan*1+i; r++) {
											if(r>i){
												list[r].children.splice(c,0,'empty')
											}
										}
									}
								}
							}else if(tem.attrs.rowspan>1){
								for (let r = i; r < tem.attrs.rowspan*1+i; r++) {
									if(r>i){
										list[r].children.splice(j,0,'empty')
									}
								}
							}

							
						}
					}else{
						continue
					}
					
				}
			}
			
			list.forEach((v,pindex)=>{
				v.children.forEach((v2,sindex)=>{
					if(v2!='empty'){
						let temp ={...v2};
						temp.attrs.style = temp.attrs.style?temp.attrs.style:''
						if(temp.attrs.colspan){
							temp.attrs.style += `grid-column-start:${sindex+1};`
							temp.attrs.style += `grid-column-end:${sindex+1+(temp.attrs.colspan)*1};`
						}else{
							temp.attrs.style += `grid-column-start:${sindex+1};`
							temp.attrs.style += `grid-column-end:${sindex+1+1};`
						}
						
						if(temp.attrs.rowspan){
							temp.attrs.style += `grid-row-start:${pindex+1};`
							temp.attrs.style += `grid-row-end:${pindex+1+(temp.attrs.rowspan)*1};`
						}else{
							temp.attrs.style += `grid-row-start:${pindex+1};`
							temp.attrs.style += `grid-row-end:${pindex+1+1};`
						}
						temp.attrs.style = temp.attrs.style.replace(/width.*?\;/,'')
						temp.attrs.style = temp.attrs.style.replace(/height.*?\;/,'')
						gridConfig.list.push(temp)
					}
				})
			})
			this.gridConfig = gridConfig
			console.log(list)
			// console.table(grid)
			
		},
		wxParseTableTap(e) {
			let parent = this.$parent;
			while (!parent.preview || typeof parent.preview !== 'function') {
				// TODO 遍历获取父节点执行方法
				parent = parent.$parent;
			}
			parent.preview("", e);
		},
		loadNode(node) {
			let obj = [];
			for (let children of node) {
				// console.log(node)
				if (children.node=='element') {
					let t = {
						name:children.tag,
						attrs: {
							class: children.classStr,
							style:children.styleStr
						},
						children: children.nodes?this.loadNode(children.nodes):[]
					}
					if(children.tag == 'td'){
							if(children.attr.colspan){
								t.attrs.colspan = children.attr.colspan
							}
							if(children.attr.rowspan){
								t.attrs.rowspan = children.attr.rowspan
							}
					}
					if(children.tag==="img"){
						t.attrs.src= children.attr.src;
						t.attrs.mode=children.attr.mode;
						t.attrs.alt=children.attr.alt;
					}
					if(children.tag == 'tr'){
						this.allTr.push(t)
					}
					obj.push(t)
				} else if(children.node=='text'){
					obj.push({
						type: 'text',
						text: children.text
					})
				}
			}
			return obj
		}
	}
};
</script>